<template>
  <div class="account">
    <NavBar></NavBar>
    <div class="addressList">
      <van-cell class="cell" :center="true" title-class="title" v-for="item in list" :key="item.id">
        <template #icon><van-icon :name="item.icon" size="40" color="#6D3805" /></template>
        <template #title><span class="addressType">{{item.type}}</span></template>
        <template #label><span class="addressLabel">{{item.detail}}</span></template>
        <template #right-icon>
          <van-icon name="arrow" size="18" color="#804F1E" />
        </template>
      </van-cell>
    </div>
    <TabBar></TabBar>
  </div>
</template>

<script setup lang="ts">
import { NavBar, TabBar } from "../../../components";
const list :any = [
  {
    type: "Home",
    icon: "../../src/assets/img/icon-address-home.png",
    detail: "Lungangen6 1234567",
  },
  {
    type: "Office",
    icon: "../../src/assets/img/icon-address-office.png",
    detail: "Lungangen6 1234567",
  },
]
</script>
<style scoped lang="less">
.addressItem {
  border-bottom: 1px solid #eee;
  padding: 15px 20px;
  display: flex;
  align-items: center;
}
.addressType,.addressLabel{
  padding-left: 10px;
  font-size: 14px;
  color:#6d3805;
}
.addressType {
  font-weight: bold;
  font-size: 18px;
}
</style>
